<template>
  <div class="pickupPay">
    <div class="pp-title">
      <span class="sign"></span>
      <span>建仓支付</span>
    </div>
    <div class="pp-content">
      <div class="ppc-line">
        <label for="applicaion">建仓金额：</label>
        <input type="text" id="applicaion" :value='data.total' disabled>
      </div>
      <div class="ppc-line">
        <label for="w-weight">建仓价格：</label>
        <input type="text" id="w-weight" :value='data.rstPrice' disabled>
      </div>
      <!-- <div class="ppc-line">
        <label for="w-quanlity">*USDT：</label>
        <input type="text" id="w-quanlity" placeholder="请输入实际打款金额">
      </div> -->
      <div class="ppc-line">
        <label for="package">*打款金额：</label>
        <input type="number" id="package" placeholder="请输入实际打款金额" v-model='money' @mousewheel='disabledwheel($event)'>
      </div>
      <div class="ppc-line">
        <label for="delivery">*汇款人：</label>
        <input type="text" id="delivery" placeholder="请输入汇款人姓名" v-model='name'>
      </div>
      <div class="ppc-line">
        <label for="accounting">*付款渠道：</label>
        <input type="text" id="accounting" placeholder="请输入银行名称或支付宝账户" v-model='zh'>
      </div>
      <div class="ppc-line">
        <label for="payAmount">卡号或账户：</label>
        <input type="text" id="payAmount" placeholder="请输入卡号或账户" v-model='kh'>
      </div>
      <div class="ppc-line">
        <label for="remittance">收款卡号：</label>
        <input type="text" id="remittance" :value='data.bankNo' disabled>
      </div>
      <div class="payBtn" @click='sure'>确认支付</div>
    </div>
  </div>
</template>
<script>
import { Message } from "element-ui";
export default {
  name: "pickupPay",
  data() {
    return {
      data: "",
      money: "",
      name: "",
      zh: "",
      kh: ""
    };
  },
  created() {
    this.id =
      Number(this.$route.params.id) ||
      Number(localStorage.getItem("jcid", this.id));
    localStorage.setItem("jcid", this.id);
    this.getIdContent();
  },
  methods: {
    disabledwheel(evt) {
      evt = evt || window.event;
      if (evt.preventDefault) {
        // Firefox
        evt.preventDefault();
        evt.stopPropagation();
      } else {
        // IE
        evt.cancelBubble = true;
        evt.returnValue = false;
      }
      return false;
    },
    getIdContent() {
      u.jcmoney({ id: this.id }, data => {
        if (data && data.code == "200") {
          data.data.bankNo = data.data.bankNo.replace(/\s+/g, "");
          this.data = data.data;
        }
      });
    },
    sure() {
      let [w, x, y, z, flag] = [
        this.money.trim(),
        this.name.trim(),
        this.zh.trim(),
        this.kh.trim(),
        true
      ];
      [w, x, y, z].some(el => {
        return el === "" ? (flag = false) : "";
      });
      if (!flag) {
        return Message({
          message: "数据填写有空",
          type: "error"
        });
      }
      if (!t.isNumber(this.money)) {
        return Message({
          message: "请输入数字",
          type: "error"
        });
      }
      if (this.money != this.data.total) {
        return Message({
          message: "打款金额需等于建仓金额",
          type: "error"
        });
      }
     if(localStorage.getItem("sfyz") != '1'){
       return Message({
          message: "未完善身份信息，请前往个人信息验证完成验证",
          type: "error"
        });
     }
      u.payjcmoney(
        {
          id: this.id,
          bankNo: this.kh,
          trueTotal: this.money,
          remitter: this.name,
          channel: this.zh,
          rstPrice: this.data.rstPrice,
          receiveDetail: this.data.receiveDetail
        },
        data => {
          if (data && data.code == "200") {
            Message({
              message: "支付成功",
              type: "success"
            });
            this.$router.push({ path: "/forward" });
          } else {
            Message({
              message: data.message,
              type: "error"
            });
          }
        }
      );
    }
  }
};
</script>
<style lang="stylus" type='text/stylus' scoped>
.pickupPay {
  width: 100%;
  height: 100%;
  background: white;

  .pp-title {
    padding: 0 20px;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    color: #282828;
    border-bottom: 1px solid #f4f5f6;

    span {
      vertical-align: middle;
    }

    .sign {
      display: inline-block;
      margin-right: 10px;
      background: #ffb001;
      width: 5px;
      height: 18px;
    }
  }

  .pp-content {
    padding: 34px 30px;
    width: 100%;
    height: calc(100% - 50px);
    overflow-y: auto;
    padding-bottom: 20px;

    &::-webkit-scrollbar {
      background-color: #f5f5f5;
      width: 3px;
    }

    &::-webkit-scrollbar-thumb {
      background-color: #d6d6d6;
    }

    .ppc-line {
      margin-bottom: 20px;
      height: 40px;

      label {
        display: inline-block;
        width: 135px;
        font-size: 14px;
        color: #3d3d3d;
      }

      input {
        padding: 0 14px;
        width: 390px;
        height: 100%;
        font-size: 14px;
        color: #747474;
        outline: none;
        border: 1px solid #e6e9ed;

        &:focus {
          border-color: #ffb001;
        }

        &::-webkit-input-placeholder {
          color: #cccccc;
        }

        &:-moz-placeholder {
          color: #cccccc;
        }
      }
    }

    .payBtn {
      margin-top: 50px;
      margin-left: 141px;
      width: 118px;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      color: white;
      text-align: center;
      border-radius: 2px;
      background: #ffb001;
      cursor: pointer;
    }
  }
}
</style>
